import React from "react";
import { Button } from 'antd';
import { Input } from 'antd';
import { Row, Col } from 'antd';
import { Drawer } from 'antd';
import { message } from 'antd';
import { List } from 'antd';
import './Demo2.css';
class Demo2 extends React.PureComponent
{
  constructor(props){
    super(props);
    this.state= {
      inputContent:"",
      visible:false,
      historyText:[],
    }
  } 
  handleNumberInput=(g)=>{
    let {visible}=this.state;
    let value;
    console.log(visible);
    switch(g.target.innerText){
      case '+':
      case '-':
      case '*':
      case '/':
        value=this.state.inputContent+" "+g.target.innerText+" ";
        break;
      case 'History':
        value=this.state.inputContent;
        this.setState({visible:!visible});
        break;
      default:
        value=this.state.inputContent+g.target.innerText;
    }
    this.setState( {
      inputContent:value,
    })
  }
  handleclear=()=>{  
    this.setState({inputContent:''});
  }
  handleShow=()=>{  
    this.setState( {
      visible:true,
      historyText:JSON.parse(localStorage.getItem('calcResult'))||[]
    })
  }
  handleOperation = ()=> {
    const {inputContent,historyText}= this.state;
    const resultArr = inputContent.split(" ");
    const optionArr = [];
    for (let i = 0; i < resultArr.length;i++) {
        const currentData = resultArr[i];
        const nextData = resultArr[i + 1]
        let tmpData = 0;
        let lastData = 0;
    switch (currentData) {
    case "+":
      break;
    case "-" :
      tmpData = 0 - parseFloat(nextData);
      console.log ( "pos1 " + tmpData);
      optionArr.push(tmpData);
      i++;
      break;
    case "*":
      lastData = optionArr.pop();
      tmpData = parseFloat(lastData) * parseFloat(nextData) ;
      optionArr.push(tmpData);
      i++;
      break;
    case "/":
      if (nextData==='0'){
        message.error('This is an error message');
      }
      lastData = optionArr.pop();
      tmpData = parseFloat(lastData) / parseFloat(nextData);optionArr.push(tmpData);
      i++;
      break;
    default:
      optionArr.push(parseFloat(currentData));
      // historyText.push(inputContent);
      break;
      }
    }
    console.log(optionArr);
    let sum = 0
    optionArr.forEach((v) => {
    sum += v;
    })
    let newdate=new Date();
    let oldHistory=JSON.parse(localStorage.getItem('calcResult'))||[];
    localStorage.setItem("calcResult",JSON.stringify([...oldHistory,{time:newdate.getFullYear()+"/"+newdate.getMonth()+"/"+newdate.getDate(),result:inputContent+'='+sum.toFixed(4)}]));
    this.setState({
      inputContent: this.state.inputContent + "=" + sum.toFixed(4),

    })
    console.log (sum.toFixed(4));
    }
        
    onClose = () => {
      this.setState({
        visible: false,
      });
    };
  render(){
    const {inputContent,visible,historyText}=this.state;
    const resultHistoryArr=JSON.parse(localStorage.getItem('calcResult'))||[];
    return(
      
      <>
        {/* 居中 */}
      <div className="div_middle">
        <Drawer
          title="计算历史"
          placement="right"
          closable={true}
          onClose={this.onClose}
          visible={visible}
        >
          {/* {
            historyText.map((item,index)=>{
              console.log(item);
              return <p key={index}>{item}</p>
            })

          } */}
          {/* <p>{inputContent}</p>
          <p>{this.handleDate()}</p> */}
          {

            resultHistoryArr.map((item,index)=>{
              return <p key={index}>{item.result}---{item.time}</p>
            })
          }
        </Drawer>
        
        <div className="div_input">
        <Input  className="input_number"
           placeholder="0" 
           value={inputContent} /> 
        </div>

        <div className="div_btnRow">  
          <Row gutter={0}>
            <Col span={6}><Button className="button_1" onClick={this.handleclear}>AC</Button></Col>
            <Col span={6}><Button className="button_1">Back</Button></Col>
            <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>%</Button></Col>
            <Col span={6}><Button className="button_2" onClick={this.handleNumberInput}>/</Button></Col>
          </Row>
        </div>
        <div className="div_btnRow">
          <Row>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>1</Button></Col>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>2</Button></Col>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>3</Button></Col>
              <Col span={6}><Button className="button_2" onClick={this.handleNumberInput}>*</Button></Col>
          </Row>
        </div>
        <div className="div_btnRow">
          <Row>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>4</Button></Col>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>5</Button></Col>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>6</Button></Col>
              <Col span={6}><Button className="button_2" onClick={this.handleNumberInput}>+</Button></Col>
          </Row>
        </div>
        <div className="div_btnRow">
          <Row>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>7</Button></Col>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>8</Button></Col>
              <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>9</Button></Col>
              <Col span={6}><Button className="button_2" onClick={this.handleNumberInput}>-</Button></Col>
          </Row>
        </div>
        <div className="div_btnRow">  
          <Row gutter={0}>
            <Col span={12}><Button className="button_1" onClick={this.handleNumberInput}>0</Button></Col>
            <Col span={6}><Button className="button_1" onClick={this.handleNumberInput}>.</Button></Col>
            <Col span={6}><Button className="button_2" onClick={this.handleOperation}>=</Button></Col>
          </Row>
        </div>
        <div className="div_btnRow">  
          <Row gutter={0}>
            <Col span={24}><Button className="button_2" onClick={this.handleShow}>History</Button></Col>
          </Row>
        </div>
      </div>


      </>
    )
  }
}
export default Demo2;